<template>
  <div>
    <div class="app-logo">
      <img
        style="width: 30px;height: 30px;vertical-align: middle;"
        class="iconfont"
        v-if="Data.picture"
        :src="Data.picture"
        alt=""
        @click="changeLogo"
      />
      <i v-else style="line-height: 30px" class="iconfont" @click="changeLogo">&#xe605;</i>
      <span style="vertical-align: middle;margin-left: 10px">{{ Data ? Data.alias : '云管家' }}</span>
    </div>
    <a-modal
      title="网页logo替换"
      :mask="true"
      :dialog-style="{ top: '100px' }"
      :visible="modal1Visible"
      @ok="() => handleSubmit()"
      @cancel="() => setModal1Visible(false)"
    >
      <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }" @submit="handleSubmit">
        <a-form-item label="网页名称">
          <a-input
            v-decorator="[
              'name',
              { rules: [{ required: true, message: '请输入网页名称!' }], initialValue: Data.alias },
            ]"
          />
        </a-form-item>
        <a-form-item label="网页logo">
          <div class="clearfix">
            <!-- <a-upload name="avatar"
                      list-type="picture-card"
                      class="avatar-uploader" :file-list="fileList" :remove="handleRemove" :before-upload="beforeUpload"
                      >
              <div v-if="!imageUrl">
                <a-icon :type="uploading ? 'loading' : 'plus'" />
                <div class="ant-upload-text">
                  上传logo
                </div>
              </div>
            </a-upload> -->
            <imageupload :type="1" v-model="imgurl" ref="logoimg" />
          </div>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import imageupload from '@/components/upload/imageupload';
import api from '@/api/workshop.js';
export default {
  name: 'logobox',
  components: {
    imageupload,
  },
  data() {
    return {
      modal1Visible: false,
      form: this.$form.createForm(this, { name: 'coordinated' }),
      config: {
        type: 'upload',
        boxSize: ['100px', '100px'],
      },
      fileList: [],
      uploading: false,
      files: [],
      count: [],
      imageUrl: null,
      params: {},
      Data: {},
      imgurl: {},
    };
  },
  created() {
    this.params.companyId = localStorage.getItem('compid');
    this.getLoGO();
  },
  methods: {
    getLoGO() {
      api.selCompanyAliasAndPicture({ compId: this.params.companyId }).then((res) => {
        this.Data = res.Data;
      });
    },
    uploadAliasAndPicture() {
      api.uploadAliasAndPicture().then((res) => {
        this.Data = res.Data;
      });
    },
    handleSubmit() {
      this.form.validateFields((err, values) => {
        if (!err) {
          const formData = new FormData();
          if (this.imgurl.id) {
            formData.append('logoId', this.imgurl.id);
          } else {
            formData.append('logoId', 0);
          }
          formData.append('alias', values.name);
          formData.append('compId', this.params.companyId);
          this.uploading = true;
          api.uploadAliasAndPicture(formData).then((res) => {
            this.uploading = false;
            this.$message.info(res.MsgDesc);
            if (res.MsgCode == 0) {
              this.modal1Visible = false;
              this.getLoGO();
            }
          });
        }
      });
    },
    changeLogo() {
      this.modal1Visible = true;
      if (this.Data.logoId) {
        this.imgurl.id = this.Data.logoId;
      }
      setTimeout(() => {
        this.$refs.logoimg.imageUrlin(this.Data.picture);
      }, 100);
    },
    setModal1Visible(data) {
      this.modal1Visible = data;
    },
    handleRemove(file) {
      const index = this.fileList.indexOf(file);
      const newFileList = this.fileList.slice();
      newFileList.splice(index, 1);
      this.imageUrl = null;
      this.fileList = newFileList;
      console.log(this.fileList);
    },
    beforeUpload(file) {
      // console.log(this.fileList)
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = (e) => {
        this.imageUrl = file.thumbUrl = e.target.result;
        this.files.push(file);
        // this.files.map((item, index) => {
        //   if (file.name === item.name) {
        //     this.count.push(index);
        //     if (this.count.length > 1) {
        //       this.$message.error("文件已存在!");
        //       this.files.splice(index, 1);
        //       return;
        //     }
        //   }
        // });
        this.fileList = [file];
        // this.fileList = [...this.files];

        // this.props.onChange(this.state.fileList)
      };
      return false;
    },
  },
};
</script>

<style scoped lang="less">
.app-logo {
  cursor: default;
  line-height: 50px;

  i {
    font-size: 30px;
    color: #1166a5;
    width: 44px;
    height: 44px;
    background-color: #fff;
    border-radius: 10px;
    vertical-align: middle;
    margin-right: 10px;
  }

  span {
    font-size: 20px;
    color: #fff;
  }
}

::v-deep .ant-modal-header {
  border: 0 !important;
}

::v-deep .ant-modal-footer {
  border: 0 !important;
}

::v-deep .ant-modal-body {
  padding: 10px 24px;
}
</style>
